<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章详情页</title>
    <link href="${pageContext.request.contextPath}/static/semantic/semantic.min.css" rel="stylesheet">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/typo.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/blog.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/editor/css/editormd.min.css"/>
</head>
<body>
<!--头部信息-->
<jsp:include page="head.jsp" />
<!--中间内容-->
<div class="ui b-padding-tb b-contatiner">
    <div class="ui container">
        <div class="ui padded stackable grid">
            <div class="eleven wide column">
                <!--文章内容-->
                <div class="ui segment b-padding-tx b-border-radius">
                    <h1 class="ui header b-text">${article.title}</h1>
                    <div class="ui stackable grid">
                        <div class="three wide column item">
                            <i class="clipboard outline  icon"></i>${article.label}
                        </div>
                        <div class="four wide column">
                            <i class="time outline icon"></i>
                            <fmt:formatDate value="${article.createTime}" pattern="yyyy-MM-dd"></fmt:formatDate>
                        </div>
                        <div class="two wide column">
                            <i class="paper plane outline icon"></i>${comCount}条
                        </div>
                    </div>
                        <div id="test-editormd" class="typo typo-selection ui segment b-border-radius">
                            　　<textarea style="display:none;" placeholder="markdown语言"> ${article.content}</textarea>
                    </div>
                </div>
                <!--评论区-->
                <div class="ui segment b-padding-tx b-border-radius">
                    <div id="form" class="ui form">
                        <div class="field">
                            <label>憨憨的写下你的看法吧</label>
                            <textarea id="content" name="cContent" rows="5"></textarea>
                        </div>
                        <div class="ui field inline">
                            <label>昵称</label>
                            <input id="nickname" type="text" name="nickname" placeholder="你的昵称">
                            <button id="cominput" class="ui button basic primary">提交</button>
                            <div class="ui error message"></div>
                        </div>
                    </div>
                    <div id="comments" class="ui comments">
                        <c:forEach items="${comments}" var="comment">
                        <div class="comment">
                            <div class="content b-text-p">
                                <div class="ui divider"></div>
                                <p class="b-padding-b">
                                    ${comment.cContent}
                                </p>
                                <p class="b-text-right">昵称:${comment.nickname}</p>
                                <p class="b-text-right">时间:
                                    <fmt:formatDate value="${comment.cTime}" pattern="yyyy-MM-dd"/>

                                </p>
                            </div>
                        </div>
                        </c:forEach>

                    </div>

                </div>
            </div>
            <div class="five wide column segment">
                <jsp:include page="sideBar.jsp"/>
            </div>
        </div>
    </div>
</div>


<!--底部信息-->
<footer>


</footer>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/static/semantic/semantic.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editor/lib/marked.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editor/lib/prettify.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editor/lib/raphael.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editor/lib/underscore.min.js"></script>
<script src="${pageContext.request.contextPath}/static/editor/lib/sequence-diagram.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/editor/editormd.js"></script>
<script>


    //添加评论
    $("#cominput").click(function () {
        console.log("出发了");
        let $content = $("#content").val();
        let $nickname = $("#nickname").val();
        console.log($content+$nickname);
        $.ajax({
            url:"${pageContext.request.contextPath}/addcomment",
            method:"get",
            data:{
                "cContent":$("#content").val(),
                "nickname":$("#nickname").val(),
                "aId":"${article.id}"
            },
            success:function (response) {
                console.log(response);
                if(response.repoCode==404){
                    alert("内容或昵称为空");
                }else{
                    let $comment=$("<div>").addClass("comment");
                    let $content=$("<div>").addClass("content");
                    let $divider=$("<div>").addClass("ui divider");
                    let $pcontent=$("<p>").addClass("b-padding-b").text($("#content").val());
                    let $nickname=$("<p>").addClass("b-text-right").text("昵称:"+$("#nickname").val());
                    let $time=$("<p>").addClass("b-text-right").text("时间："+response.objectMap.comment.cTime);
                    $content.append($divider).append($pcontent).append($nickname).append($time);
                    $comment.append($content);
                    $("#comments").prepend($comment);
                }
            },
            error:function () {
                console.log("小二在article翻车了");
            }
        });

    });

    editormd.markdownToHTML("test-editormd", {
        htmlDecode      : "style,script,iframe",
        emoji           : true,
        taskList        : true,
        tex             : true,  // 默认不解析
        flowChart       : true,  // 默认不解析
        sequenceDiagram : true  // 默认不解析
    });

</script>
<!--
<div class="comment">
                            <div class="content">
                                <div class="ui divider"></div>
                                <p class="b-padding-b">
                                    Hey guys, I hope this example comment
                                    is helping you read this documentation.
                                    Hey guys, I hope this example comment
                                    is helping you read this documentation.
                                </p>
                                <p class="b-text-right">昵称:林佳键</p>
                                <p class="b-text-right">时间:2017-1-1</p>
                            </div>
                        </div>
-->
</body>
</html>